<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="../vue.js"></script>
    <script src="../vue-router.js"></script>
</head>
<body>
<div id="app" >
    <App></App>
</div>

<script>
    //让vue使用vue-router
    Vue.use(VueRouter)

    //创建Login对象
    var Login = {
        template: `
            <h2>我是登录页面</h2>
        `
    }

    //创建Register对象
    var Register = {
        template: `
            <h2>我是注册页面</h2>
        `
    }

    //创建vue-router对象
    var router = new VueRouter({
        //配置路由
        routes:[
            //路由匹配规则,路径加子组件名
            {
                path:"/login",
                name:"login",
                component:Login,
            },
            {
                path:"/register",
                component:Register,
            }
        ]
    })


    // 使用router-link 他最终会被渲染成a标签
    // router-view 相当于一个占位符，用于展示被匹配路径匹配到的组件中的内容(路由组件的出口)
    var App = {
        template: `<div>
                         <router-link :to="{name:'login'}">登录</router-link>
                         <router-link to="/register">注册</router-link>
                         <router-view></router-view>
                    </div>`,
    }

    // 创建根实例
    new Vue({
        el: '#app',
        data:{
            messagec:'我是祖父组件的数据',
        },
        components: {
            App
        },
        //吧router交给根组件管理
        router:router
        // template:`<App message="hello" :texts="messagec" @getHeaderData="getDataMethod"></App>`
    })
</script>
</body>
</html>
